<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>

    <%--设置页面基本路径--%>
    <base href="<%=basePath%>">

    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" method="post" action="${user != null? 'admin/update.do' : 'admin/insert.do'}" id="adminForm">
        <%--修改属性id传送过去--%>
        <input type="hidden" name="userId" value="${user.userId}">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>管理员账号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" ${user != null?'disabled':'' } value="${user.username}" placeholder="请输入账号" id="username" name="username">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>真实名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="${user.realname}" placeholder="请输入真实名称" id="realname" name="realname">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>初始密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" autocomplete="off" value="" placeholder="请输入密码" id="password"
                       name="password">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" autocomplete="off" placeholder="确认新密码" id="password2"
                       name="password2">
            </div>
        </div>
        <%--<div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="sex" type="radio" id="sex-1" checked>
                    <label for="sex-1">男</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-2" name="sex">
                    <label for="sex-2">女</label>
                </div>
            </div>
        </div>
       &lt;%&ndash; <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="phone" name="phone">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="@" name="email" id="email">
            </div>
        </div>&ndash;%&gt;--%>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">角色：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box" style="width:150px;">
			<select class="select" name="roleId" size="1">
				<option value="0">请选择</option>
                <c:forEach var="role" items="${roles}">
                    <option ${user.roleId eq role.roleId? 'selected':''} value="${role.roleId}">${role.rolename}</option>
                </c:forEach>
			</select>
			</span></div>
        </div>
        <%-- <div class="row cl">
             <label class="form-label col-xs-4 col-sm-3">备注：</label>
             <div class="formControls col-xs-8 col-sm-9">
                 <textarea name="" cols="" rows="" class="textarea"  placeholder="说点什么...100个字符以内" dragonfly="true" onKeyUp="$.Huitextarealength(this,100)"></textarea>
                 <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
             </div>
         </div>--%>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
    //Form表单进行验证
    $(function () {
        //开始进行jquery.validate 表单插件进行表单校验
        $("#adminForm").validate({

            rules: {
                username: {
                    required: true,
                    minlength: 4,
                    remote: {
                        url: "admin/checkName.do",     //后台处理程序
                        type: "post",               //数据发送方式
                        dataType: "json",           //接受数据格式
                        data: {                     //要传递的数据
                            username: function () {
                                return $("#username").val();
                            }
                        }
                    }
                },
                realname: {
                    required: true,
                    isChinese: true,
                    rangelength: [2, 10]
                },
                password: {
                    //可以加入isPwd:true  作用：以字母开头，长度在6-12之间，只能包含字符、数字和下划线
                    required: true,
                    rangelength: [1, 10]
                },
                password2: {
                    equalTo: "#password"
                },
                roleId: {
                    min: 1
                }

            },
            messages: {
                //校验失败提示消息
                username: {
                    required: "账号不能为空!",
                    minlength: "账号最少4位数!",
                    remote: "账号已经存在！请换一个账号！"
                }, realname: {
                    required: "真实姓名不能为空!",
                    isChinese: "必须位汉字!",
                    rangelength: "长度不得大于10小于2!"
                },
                password: {
                    required: "密码不能为空!",
                    rangelength: "输入长度必须大于1位小于10位!"
                },
                password2: {
                    equalTo: "两次密码不一致!"
                },
                roleId: {
                    min: "请选择角色!"
                }
            },
            submitHandler: function (form) {
                /*
                *  校验成功
                * 回调函数
                  form:表单dom对象
                  使用ajax异步提交即可
                  Dom对象转换成Jquery对象：$(dom对象)
                  需要指定action,method，提交的是整个表单
                * */

                $(form).ajaxSubmit(function (data) {
                    console.log("1")
                    layer.msg(data.msg, {icon: data.code, time: 1500}, function () {
                        if (data.code == 1) {

                            //刷新父页面的boostrap-Table表格
                            parent.refreshTable();

                            //让父页面关闭弹框
                            parent.layer.closeAll();
                        }
                    })

                });

            }

        });


    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>

